<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>新经资讯后台管理</title>
	<link rel="stylesheet" type="text/css" href="../../static/admin/css/reset.css">
	<link rel="stylesheet" type="text/css" href="../../static/admin/css/main.css">
	<script type="text/javascript" src="../../static/admin/js/echarts.min.js"></script>
</head>
<body>
	<div class="breadcrub">
		当前位置：用户管理>用户统计
	</div>
	<div class="spannels">
    <div class="spannel scolor01">
        <em>{{ data.total_count }}</em><span>人</span>
        <b>用户总数</b>
    </div>
    <div class="spannel scolor02">
        <em>{{ data.mon_count }}</em><span>人</span>
        <b>用户月新增数</b>
    </div>
    <div class="spannel2 scolor03">
        <em>{{ data.day_count }}</em><span>人</span>
        <b>用户日新增数</b>
    </div>
</div>
	
	<div class="pannel">
		<div id="chart_show" class="chart_show"></div>
	</div>
	<script>
		var oChart = echarts.init(document.getElementById('chart_show'));
		var chartopt = {
            title:{
                text: '用户登录活跃数',
                left: 'center',
                top: '10'
            },
            tooltip:{
                trigger: 'axis'
            },
            legend: {
                data:['active'],
                top: '40'
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line','bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            xAxis : [
                {
                    name: '今天',
                    type : 'category',
                    boundaryGap : false,
                    data : {{ data.active_date | safe }}
                }
            ],
            yAxis : [
                {
                    name: '活跃用户数量',
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'active',
                    type:'line',
                    smooth:true,
                    itemStyle: {normal: {areaStyle: {type: 'default'}, color: '#f80'}, lineStyle: {color: '#f80'}},
                    data: {{ data.active_count }}
                }],
            areaStyle:{
                    normal:{
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(255,136,0,0.39)'
                        }, {
                            offset: .34,
                            color: 'rgba(255,180,0,0.25)'
                        },{
                            offset: 1,
                            color: 'rgba(255,222,0,0.00)'
                        }])

                    }
                }

            };

            oChart.setOption(chartopt);

	</script>
</body>
</html>